<template>
  <el-dialog
    v-model="visible"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    center
    class="unified-dialog progress-dialog"
  >
    <!-- 统一头部 -->
    <template #header>
      <div class="dialog-header">
        <div class="header-icon header-icon-primary">
          <el-icon><Loading /></el-icon>
        </div>
        <div class="header-content">
          <h3>{{ title }}</h3>
          <p>{{ description }}</p>
        </div>
      </div>
    </template>
    <div class="progress-content">
      <!-- 进度信息 -->
      <div class="progress-info">
        <h4 class="progress-title">{{ currentStep }}</h4>
        
        <!-- 进度条 -->
        <el-progress 
          v-if="showProgress"
          :percentage="progressPercentage" 
          :stroke-width="8"
          :show-text="false"
          class="progress-bar"
        />
        
        <!-- 步骤列表 -->
        <div v-if="steps && steps.length > 0" class="steps-list">
          <div 
            v-for="(step, index) in steps" 
            :key="index"
            class="step-item"
            :class="{
              'completed': index < currentStepIndex,
              'active': index === currentStepIndex,
              'pending': index > currentStepIndex
            }"
          >
            <div class="step-icon">
              <el-icon v-if="index < currentStepIndex" class="success-icon">
                <Check />
              </el-icon>
              <el-icon v-else-if="index === currentStepIndex" class="loading-icon rotating">
                <Loading />
              </el-icon>
              <div v-else class="pending-dot"></div>
            </div>
            <div class="step-text">{{ step }}</div>
          </div>
        </div>
        
        <!-- 统计信息 -->
        <div v-if="stats" class="stats-info">
          <div class="stat-item">
            <span class="stat-label">处理表数：</span>
            <span class="stat-value">{{ stats.processed || 0 }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">成功：</span>
            <span class="stat-value success">{{ stats.success || 0 }}</span>
          </div>
          <div class="stat-item" v-if="stats.failed > 0">
            <span class="stat-label">失败：</span>
            <span class="stat-value error">{{ stats.failed || 0 }}</span>
          </div>
          <div class="stat-item" v-if="stats.elapsed">
            <span class="stat-label">耗时：</span>
            <span class="stat-value">{{ stats.elapsed }}秒</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部按钮 -->
    <template #footer>
      <el-button 
        v-if="canCancel && !isCompleted" 
        @click="handleCancel"
        :disabled="cancelling"
      >
        {{ cancelling ? '正在取消...' : '取消操作' }}
      </el-button>
      <el-button 
        v-if="isCompleted" 
        type="primary" 
        @click="handleClose"
      >
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { Loading, Check } from '@element-plus/icons-vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '正在处理'
  },
  currentStep: {
    type: String,
    default: '正在执行操作...'
  },
  description: {
    type: String,
    default: '请稍候，操作正在进行中'
  },
  steps: {
    type: Array,
    default: () => []
  },
  currentStepIndex: {
    type: Number,
    default: 0
  },
  progressPercentage: {
    type: Number,
    default: 0
  },
  showProgress: {
    type: Boolean,
    default: false
  },
  stats: {
    type: Object,
    default: null
  },
  canCancel: {
    type: Boolean,
    default: false
  },
  isCompleted: {
    type: Boolean,
    default: false
  },
  cancelling: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'cancel', 'close'])

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const handleCancel = () => {
  emit('cancel')
}

const handleClose = () => {
  emit('close')
  visible.value = false
}

// 监听完成状态，自动显示统计信息
watch(() => props.isCompleted, (completed) => {
  if (completed && props.stats) {
    // 完成后可以显示更多统计信息
  }
})
</script>

<style scoped>
/* 对话框已使用统一样式 */
.progress-dialog :deep(.el-dialog__body) {
  padding: 24px;
}

.progress-content {
  text-align: center;
}

.header-icon .rotating {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.progress-info {
  margin-bottom: 16px;
}

.progress-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin: 0 0 12px 0;
}

.progress-bar {
  margin: 20px 0;
}

.steps-list {
  text-align: left;
  margin: 20px 0;
  max-height: 200px;
  overflow-y: auto;
}

.step-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  transition: all 0.3s ease;
}

.step-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.success-icon {
  color: var(--el-color-success);
  font-size: 16px;
}

.loading-icon {
  color: var(--el-color-primary);
  font-size: 14px;
}

.pending-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--el-border-color);
}

.step-text {
  font-size: 14px;
  line-height: 1.4;
}

.step-item.completed .step-text {
  color: var(--el-color-success);
}

.step-item.active .step-text {
  color: var(--el-color-primary);
  font-weight: 500;
}

.step-item.pending .step-text {
  color: var(--el-text-color-regular);
}

.stats-info {
  background: var(--el-fill-color-light);
  border-radius: 8px;
  padding: 16px;
  margin: 20px 0;
  text-align: left;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.stat-item:last-child {
  margin-bottom: 0;
}

.stat-label {
  font-size: 14px;
  color: var(--el-text-color-regular);
}

.stat-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.stat-value.success {
  color: var(--el-color-success);
}

.stat-value.error {
  color: var(--el-color-error);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .progress-dialog {
    width: 90% !important;
  }
  
  .progress-content {
    padding: 16px;
  }
  
  .progress-title {
    font-size: 16px;
  }
}
</style>

